<style>
    #permission textarea{
        background: #eee;
        border:1px solid #ddd;
    }
</style>
<template>
    <table id="permission" style="margin-left: 10px;margin-right: 10px;">
        <tr style="display: none">
            <td valign="top" width="80">岗位</td>
            <td>
                <textarea readonly name="" id="qs" cols="50" rows="5"></textarea>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm setq" id="setq">设置</a>
            </td>
            <td style="padding-left: 1px;">
                <a href="javascript:;" class="btn btn-sm" id="clean-q" value="q">清空</a>
            </td>
        </tr>
        <tr>
            <td valign="top" width="80">角色</td>
            <td>
                <textarea readonly name="" id="rs" cols="50" rows="5">{{_rs}}</textarea>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm" id="setr" @click="rs">设置</a>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm setq" id="clean-r" value="r" @click="clear('roles')">清空</a>
            </td>
        </tr>
        <tr>
            <td valign="top">部门</td>
            <td>
                <textarea readonly name="" id="ds" cols="50" rows="5">{{_ds}}</textarea>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm" id="setd" @click="ds()">设置</a>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm" id="clean-d" value="d" @click="clear('deps')">清空</a>
            </td>
        </tr>
        <tr>
            <td valign="top">人员</td>
            <td>
                <textarea readonly name="" id="ps" cols="50" rows="5">{{_us}}</textarea>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm" id="setp" @click="us">设置</a>
            </td>
            <td>
                <a href="javascript:;" class="btn btn-sm" id="clean-p" value="p" @click="clear('users')">清空</a>
            </td>
        </tr>
    </table>
</template>

<script>
    var component = {
        props: ["data", "nodeId"],
        data(){
            return {}
        },
        computed:{
            _us(){
                return Object.values(this.data.users).join(",");
            },
            _rs(){
                return Object.values(this.data.roles).join(",");
            },
            _ds(){
                return Object.values(this.data.deps).join(",");
            }
        },
        methods:{
            clear(key){
                Vue.set(this.data, key, {});
            },
            us(){
                var t = this;
                //已选
                window.onChooseInit = function(){
                    return t.data.users
                };
                window.onChooseCallback = function(selected){
                    t.data.users = selected;
                }
                window.open("../org/choose.html", "choose-user", "left=100, top=100, width=500, height=400, location=no, resizable=no")
            },

            rs(){
                var t = this;
                //已选
                window.onChooseInit = function(){
                    return t.data.roles
                };
                window.onChooseCallback = function(selected){
                    t.data.roles = selected;
                }
                window.open("../org/selectQ.html?type=r", "choose-user", "left=100, top=100, width=500, height=400, location=no, resizable=no")
            },
            ds(){
                var t = this;
                //已选
                window.onChooseInit = function(){
                    return t.data.deps
                };
                window.onChooseCallback = function(selected){
                    t.data.deps = selected;
                }
                window.open("../org/selectQ.html?type=d", "choose-user", "left=100, top=100, width=500, height=400, location=no, resizable=no")
            }
        }
    };

</script>